<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	/* http://localhost:8080/logistics/  */
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置当前页面基础路径 -->
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,role-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" method="post" action="${empty role ?'role/insert.do':'role/update.do'}" id="roleForm">
	<!-- 用户id：修改的时候使用 -->
	<input type="hidden" name="roleId" value="${role.roleId}">
	
	<!-- 权限id的隐藏域：以供zTree插件获取数据以后进行设置值 -->
	<input type="hidden" name="permissionIds" id="permissionIds">
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<!-- 
				如果 表单被禁用 ：disabled ，jquery-validate 就不会校验了
			 -->
			<input type="text" class="input-text"    value="${role.rolename}" placeholder="请输入角色名称" id="rolename" name="rolename">
		</div>
	</div>
	


	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">备注：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<textarea name="remark" cols="" rows="" class="textarea"  placeholder="请输入角色描述">${role.remark}</textarea>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">系统权限：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<ul id="permissionTree" class="ztree"></ul>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>


<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript">
$(function(){
	
	/* 
		开始使用Jquery.validate 表单校验插件进行表单校验
		
	*/
	
	$("#roleForm").validate({
		/* 校验规则 */
		rules:{
			rolename:{
				required:true,
			}
					
		},
		/* 校验失败的提示消息 */
		messages:{
			rolename:{
				required:"角色名称不能为空",
			}
		},
		/* 校验成功以后的处理函数 
		
			form :原生js的DOM对象
			
			原生js转 jquery对象  $(form)
		*/
		submitHandler:function(form){
			
		/* 
			在提交之前，应该先获取 zTree权限的id值拼接字符串，并且设置给隐藏域
			permissionIds
		*/
		var permissionIds = getCheckedNodeData();
		if("" == permissionIds){
			layer.msg("最少分配一个权限",{icon:0});
			return false;
		}
		//将权限的值设置给隐藏域permissionIds
		$("#permissionIds").val(permissionIds);
			
		//使用ajax提交表单
		$(form).ajaxSubmit(function(data){
			
			//提示
			layer.msg(data.message, {icon: data.code,time:2000},function(){
				
				//新增成功：刷新父页面表格，并且关闭弹出框（新增界面，子页面）
				//一定要先刷新，再关闭，因为关闭了，就不存父页面
				if(data.code == 1){
					//刷新父页面bootstrap-table表格
					parent.refreshTable();
					
					//关闭弹出框
					parent.layer.closeAll();
					
				}
				
			}); 
		})
			
		}
		
		
	});
	
	
});
</script> 

<!-- zTree功能使用 -->
<script type="text/javascript">
	
		//获取选中节点的数据（权限的id的值），拼接完毕以后，设置给隐藏域permissionIds
		function getCheckedNodeData(){
			//获取zTree树对象，注意：不是id选择器，不要在 字符串中加#
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			//获取被选中的节点
			var nodes = treeObj.getCheckedNodes(true);
			
			//声明数组封装权限id：permissionId
			
			var permissionIds = [];
			console.log(nodes);
			//循环节点，并获取所有的权限id添加到数组中
			for(var i = 0 ;i<nodes.length;i++){
				
				permissionIds.push(nodes[i].permissionId);
			}
			//数组
			console.log(permissionIds);
			
			//将数组转换成字符串
			var permissionIdsStr = permissionIds.toString();
			//console.log(permissionIdsStr);//1,2,4,5
			
			return permissionIdsStr;
		}
	
	
		/* zTree的设置对象，如果不写任何配置，就是加载zTree默认配置 */
		var setting = {
			data : {
				simpleData : {
					enable : true,
					/* 设置zTree的id的名称：和权限id保持一致 */
					idKey : "permissionId",
					/* 设置zTree的pId的名称：和权限的父id保持一致 */
					pIdKey : "parentId"
				}
			},
			check : {
				/* 是否显示复选框 */
				enable : true
			},
			/* 异步加载 */
			async : {
				enable : true,
				url : "permission/getAllPermission.do",
				dataFilter: ajaxDataFilter,
			},
			//回调
			callback: {
				//异步加载成功以后
				onAsyncSuccess: zTreeOnAsyncSuccess
			}
			
		};
		//异步加载成功的回调函数
		function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
			/* 
				数据回显思路：（修改的已经有的权限需要对应的复选框勾上）
				
				1，获取后台共享的权限
				
				var permissionIds = "49,31,34,35";
				
				2,切割成数组
				var permissionionArr = permissionIds.split(",");
				
				3，循环数组获取灭一个id值
				3.1 调用zTree通过属性的值获取zTree节点的方法
					通过permissionId 的值获取 对应节点
				3.2 让其节点选中
			
			*/
			
			//获取zTree树对象，注意：不是id选择器，不要在 字符串中加#
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			//1，获取后台共享的权限字符串	
			var permissionIds = "${role.permissionIds}";
			console.log("permissionIds ",permissionIds);
			//2,切割成数组
			var permissionionArr = permissionIds.split(",");
			
			//3，循环数组获取没一个id值
			for(var i = 0 ; i<permissionionArr.length; i++){
				//获取具体某一个permissionId
				var permissionId = 	permissionionArr[i];
				//3.1 调用zTree通过属性的值获取zTree节点的方法
					//通过permissionId 的值获取 对应节点
				var node = treeObj.getNodeByParam("permissionId", permissionId, null);
				console.log("要回显的节点：",node);
				//3.2 让其节点选中
				if(node !=null){
					treeObj.checkNode(node, true, false);
				}
				
			}
			
		};
		
		/* 对异步加载的数据进行预处理（zTree还没有渲染之前处理，处理后的数据参与zTree的渲染） */
		function ajaxDataFilter(treeId, parentNode, responseData) {
		    if (responseData) {
		      for(var i =0; i < responseData.length; i++) {
		      	//新增一个open属性，让其渲染zTree的时候展开节点
		    	 responseData[i].open = true;
		      	//把url设置null，防止跳转
		    	 responseData[i].url = null;
		      }
		    }
		    return responseData;
		};
		

		/* 文档初始化jquery执行  */
		$(function() {
			/* 初始化zTree */
			$.fn.zTree.init($("#permissionTree"), setting);
		})
	</script>

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>